<template>
	<view class="header">
		<!-- 顶部导航栏区域 -->
		<u-navbar :title="title" :background="background" :is-back="isBack" :back-icon-color="backColor"
			:border-bottom="borderBottom" :title-color="textColor" :title-bold="titleBold" :is-fixed="isFixed"
			@click-left="onClickLeft" @click-right="onClickRight" ref="uNavbar">
			<template #right>
				<slot class="content">
					<view class="rightContent" @click="selectRightIconChange"
						:style="{color:rightTextColor, fontSize:rightTextFontSize + 'rpx'}">{{rightContent}}
						<image :src="rightIcon" mode=""></image>
					</view>
				</slot>
			</template>
		</u-navbar>
		<!-- 搜索区域 -->
		<view style="position: fixed;width: 100%;background-color: #fff;z-index: 99;">
			<view v-if="isSearch" class="navbar">
				<uni-search-bar ref="uniSearchBar" :style="{backgroundColor: backgroundColor,width:width}"
					:textColor="searchTextColor" :placeholder="placeholder" :isSelect="isSelect" @confirm="confirm"
					v-model="inputKeyWords" :selectValue="selectKeyWords" :rangeSearchData="rangeSearchData"
					@clear="cancel" @cancel="cancel" @changeSearchSelect="changeSearchSelect"></uni-search-bar>
			</view>
			<view v-if="isTab" style="padding-bottom: 15rpx;">
				<uni-segmented-control :current="tabActiveIndex" :values="tabsList" :style-type="styleType"
					:active-color="activeColor" @clickItem="tabOnClickItem" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'header-title',
		props: {
			// 是否显示下拉选择
			isSelect: {
				type: Boolean,
				default: false,
			},
			// 是否显示tab切换盗汗蓝
			isTab: {
				type: Boolean,
				default: false,
			},
			// 输入框的placeholder
			placeholder: {
				type: String,
				default: '请输入关键字'
			},
			// 输入框绑定的值
			inputValue: {
				type: String,
				default: ''
			},
			// 下拉搜索绑定值
			selectValue: {
				type: String,
				default: ''
			},
			backgroundColor: { //输入框的背景颜色
				type: String,
				default: '#509DF7'
			},
			// tab切换显示的背景颜色默认选中
			activeColor: { //输入框的背景颜色
				type: String,
				default: '#007aff'
			},
			shaixuan: {
				type: String,
				default: ''
			},
			title: { //标题内容
				type: String,
				default: '',
			},
			rightContent: {
				type: String, //右侧字体
				default: '',
			},
			rightIcon: {
				type: String, //右侧图标
				default: '',
			},
			isBack: { //左侧是否显示返回箭头
				type: Boolean,
				default: false,
			},
			isSearch: { //是否显示搜索区域
				type: Boolean,
				default: true,
			},
			background: { //背景设置
				type: Object,
				default: () => {},
			},
			textColor: { //标题文字颜色
				type: String,
				default: '#323233',
			},
			// 搜索狂的字体颜色
			searchTextColor: {
				type: String,
				default: '#fff',
			},
			// 右侧文字的大小
			rightTextFontSize: {
				type: Number,
				default: 30
			},
			borderBottom: { //是否加下边框
				type: Boolean,
				default: true,
			},
			titleBold: { //标题文字加粗
				type: Boolean,
				default: true
			},
			backColor: { //左侧返回箭头的颜色
				type: String,
				default: ''
			},
			rightTextColor: { //右侧字体的颜色
				type: String,
				default: ""
			},
			isFixed: { //头部是否固定
				type: Boolean,
				default: true
			},
			tabbarIndex: {
				type: String,
				default: ''
			},
			// 搜索输入框的宽度
			width: {
				type: String,
				default: '100%'
			},
			// 下拉搜索列表数据
			rangeSearchData: {
				type: Array,
				default: () => []
			},
			// tab列表数据
			tabsList: {
				type: Array,
				default: () => []
			},
			// tab切换默认下标
			currentIndex: {
				type: Number,
				default: 0
			},
			// tab切换的导航显示类型
			styleType: {
				type: String,
				default: 'text'
			}
		},
		data() {
			return {
				// 搜索输入框绑定的值
				inputKeyWords: this.inputValue,
				// 下拉框绑定的值
				selectKeyWords: this.selectValue,
				// 默认tab导航栏选中
				tabActiveIndex: this.currentIndex
			};
		},
		computed: {},
		watch: {},
		created() {},
		methods: {
			// 返回点击
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			onClickRight() {},
			navbarHeight() {
				return this.$refs.uNavbar.navbarHeight;
			},
			navbarInnerStyle() {
				return this.$refs.uNavbar.navbarInnerStyle;
			},
			selectRightIconChange() {
				this.$emit('selectRightIconChange')
			},
			// 输入框搜索
			confirm() {
				this.$emit('confirm', this.inputKeyWords)
			},
			// 输入框清空
			cancel() {
				console.log('输入框清空')
				this.$emit('cancel')
			},
			changeSearchSelect(selectValueKeyWords) {
				this.selectKeyWords = selectValueKeyWords
				this.$emit('changeSearchSelect', selectValueKeyWords)
			},
			// 单独处理清空uni-searh-bar组件里的变量值
			clearSelectKewords() {
				this.selectKeyWords = ""
				// 同时寝宫左侧下拉搜索词初始化 默认关键字
				this.$refs.uniSearchBar.selectKeyWords = "DRKeyWord"
			},
			// tab切换事件
			tabOnClickItem(event) {
				this.$emit('tabOnClickItem', event.currentIndex)
			}
		},
	};
</script>

<style scoped lang='scss'>
	.header {
		width: 100%;

		.content {
			text-align: center;
			transform: translateX(-200upx);
		}
	}

	::v-deep .u-navbar-inner {
		display: flex;
		justify-content: center;
	}

	.rightContent {
		line-height: 88upx;
		font-size: 26upx;
		display: flex;
		align-items: center;

		image {
			vertical-align: middle;
			width: 30upx;
			height: 30upx;
			margin-left: 5rpx;
		}
	}
</style>